import React, { useEffect } from 'react'
import "./Toast.less"
import Alert from '@mui/material/Alert';
import { useSelector, useDispatch } from "react-redux"

export default function Toast() {
    const { isshow, type, message } = useSelector((state: IState) => state.toastData)
    const dispatch = useDispatch()
    useEffect(() => {
        if (isshow) {
            setTimeout(() => {
                dispatch({ type: "hideTosast" })
            }, 3000);
        }
    })
    return (
        <div className='toast' style={{ display: isshow ? "block" : "none" }}>
            <Alert severity={type}>{message}</Alert>
        </div>
    )
}
